<template>
    <main>
        <GameHero></GameHero>
        <section class="ml-game-feature ml-wrapper">
            <div class="container">
                <div class="title"><h2>{{$t('game_feature_title')}}</h2></div>
                <div class="row">
                    <div class="col-md-3 item-feature" v-for="(item, key) in feature" :key="key">
                        <div class="content"><img :src="item.path" alt=" feature"><h4>
                            {{ item.title }}</h4>
                            <p>{{ item.desc }}</p></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ml-game-img ml-wrapper">
            <div class="container">
                <div class="title"><h2>{{$t('game_game_img_title')}}</h2></div>
                <div class="row">
                    <div class="col-md-3 col-sm-6" v-for="(item, key) in gameImg" :key="key">
                        <div class="content"><a href="https://getmalus.com/game/bh3--%E5%B4%A9%E5%9D%8F3rd"
                                                target="_blank"><img :src="item.path"
                                                                     alt=" feature"></a></div>
                    </div>
                </div>
            </div>
        </section>

        <section class="ml-wrapper scene">
            <div class="container">
                <div class="title ml-title"><h2 class="">Malus加速器适用于各种回国需求</h2>
                    <div class="quote">Malu 加速器适合多种场景，不管游戏、音视频、直播、工作全覆盖</div>
                </div>
                <div class="row">
                    <div class="col-3">
                        <div class="content"><img src="../assets/scene_1.94d37.png" alt="img">
                            <div class="title">国服游戏加速</div>
                            <div class="des">国服游戏全支持，超稳定零丢包，多平台使用，Windows、iOS、Android 均可使用</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="content s2"><img src="../assets/scene_2.b0b4a.png" alt="img">
                            <div class="title">音乐、视频加速</div>
                            <div class="des">Malus 可加速国内99%的音视频软件，包括但不限于哔哩哔哩、爱奇艺、优酷、网易云音乐、QQ音乐......</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="content s3"><img src="../assets/scene_3.0c663.png" alt="img">
                            <div class="title">直播加速</div>
                            <div class="des">专业回国线路，确保国外直播低延迟，YY语音、直播姬、OBS推流流畅运行，此外还支持边游戏边直播</div>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="content s4"><img src="../assets/scene_4.a0328.png" alt="img">
                            <div class="title">办公、学习、股票</div>
                            <div class="des">Malus 满足办公、学习、炒股等特殊场景需求，数据安全加密，隐私有保障</div>
                        </div>
                    </div>
                </div>
                <a href="/signup?utm_source=webat&amp;utm_medium=" class="seo-btn lg">立即下载Malus回国加速器</a></div>
        </section>

        <div class="ml-wrapper price" id="buy">
            <div class="container">
                <div class="title"><h2>{{$t('game_price_title')}}</h2></div>
                <div class="row plans">
                    <div class="col-6 col-lg-3">
                        <div class="price-card">
                            <div class=""></div>
                            <div class="top">
                                <div class="days">30天</div>
                                <div class="discount"></div>
                            </div>
                            <div class="middle">
                                <small>¥</small>
                                <div class="nbfont">72</div>
                                <span>/30天</span>
                            </div>
                            <div class="bottom">共计 ¥72</div>
                            <a href="/buy?days=30&amp;code=" class="buy-btn">{{$t('game_price_button')}}</a>
                        </div>
                    </div>

                    <div class="col-6 col-lg-3">
                        <div class="price-card">
                            <div class=""></div>
                            <div class="top">
                                <div class="days">90天</div>
                                <div class="discount">3% {{$t('game_price_off')}}</div>
                            </div>
                            <div class="middle">
                                <small>¥</small>
                                <div class="nbfont">70</div>
                                <span>/30天</span>
                            </div>
                            <div class="bottom">共计 ¥210</div>
                            <a href="/buy?days=90&amp;code=" class="buy-btn">{{$t('game_price_button')}}</a>
                        </div>
                    </div>

                    <div class="col-6 col-lg-3">
                        <div class="price-card">
                            <div class=""></div>
                            <div class="top">
                                <div class="days">180天</div>
                                <div class="discount">15% {{$t('game_price_off')}}</div>
                            </div>
                            <div class="middle">
                                <small>¥</small>
                                <div class="nbfont">62</div>
                                <span>/30天</span>
                            </div>
                            <div class="bottom">共计 ¥370</div>
                            <a href="/buy?days=180&amp;code=" class="buy-btn">{{$t('game_price_button')}}</a>
                        </div>
                    </div>

                    <div class="col-6 col-lg-3">
                        <div class="price-card">
                            <div class="tag">{{$t('game_price_hot')}}</div>
                            <div class="top">
                                <div class="days">360天</div>
                                <div class="discount">31% {{$t('game_price_off')}}</div>
                            </div>
                            <div class="middle">
                                <small>¥</small>
                                <div class="nbfont">50</div>
                                <span>/30天</span>
                            </div>
                            <div class="bottom">共计 ¥600</div>
                            <a href="/buy?days=360&amp;code=" class="buy-btn">{{$t('game_price_button')}}</a>
                        </div>
                    </div>
                </div>
                <div class="tips"><i class="ri-coupon-line"></i>{{$t('game_price_coupon')}}</div>
            </div>
        </div>

        <user-comment></user-comment>

        <section class="ml-wrapper ml-seo-more">
            <div class="container">
                <div class="title ml-title"><h2 class="">Malus加速更多游戏</h2>
                    <div class="quote">国服游戏全支持，不定期更新游戏列表</div>
                </div>
                <div class="content"><a href="/game/ys--%E5%8E%9F%E7%A5%9E"><i
                    class="ri-rocket-line"></i><span>原神</span></a>
                    <a href="/game/pubgmobile--%E5%92%8C%E5%B9%B3%E7%B2%BE%E8%8B%B1"><i
                        class="ri-rocket-line"></i><span>和平精英</span></a> <a
                        href="/game/kpl--%E7%8E%8B%E8%80%85%E8%8D%A3%E8%80%80"><i
                        class="ri-rocket-line"></i><span>王者荣耀</span></a> <a
                        href="/game/ark--%E6%98%8E%E6%97%A5%E6%96%B9%E8%88%9F"><i
                        class="ri-rocket-line"></i><span>明日方舟</span></a> <a
                        href="/game/bh3--%E5%B4%A9%E5%9D%8F3rd"><i class="ri-rocket-line"></i><span>崩坏3rd</span></a>
                    <a href="/game/benghuai2--%E5%B4%A9%E5%9D%8F%E5%AD%A6%E5%9B%AD2%EF%BC%88%E6%B7%B7%E6%9C%8D%EF%BC%89"><i
                        class="ri-rocket-line"></i><span>崩坏学园2（混服）</span></a> <a
                        href="/game/benghuai--%E5%B4%A9%E5%9D%8F%E5%AD%A6%E5%9B%AD2"><i
                        class="ri-rocket-line"></i><span>崩坏学园2</span></a> <a
                        href="/game/pcr--%E5%85%AC%E4%B8%BB%E8%BF%9E%E7%BB%93%EF%BC%9ARe%20Dive"><i
                        class="ri-rocket-line"></i><span>公主连结：Re Dive</span></a> <a
                        href="/game/yys--%E9%98%B4%E9%98%B3%E5%B8%88"><i
                        class="ri-rocket-line"></i><span>阴阳师</span></a> <a
                        href="/game/mrzh--%E6%98%8E%E6%97%A5%E4%B9%8B%E5%90%8E"><i
                        class="ri-rocket-line"></i><span>明日之后</span></a> <a
                        href="/game/opl--%E5%86%B3%E6%88%98%EF%BC%81%E5%B9%B3%E5%AE%89%E4%BA%AC"><i
                        class="ri-rocket-line"></i><span>决战！平安京</span></a> <a
                        href="/game/id5--%E7%AC%AC%E4%BA%94%E4%BA%BA%E6%A0%BC"><i
                        class="ri-rocket-line"></i><span>第五人格</span></a> <a
                        href="/game/qqspeed--QQ%E9%A3%9E%E8%BD%A6"><i
                        class="ri-rocket-line"></i><span>QQ飞车</span></a> <a
                        href="/game/sky--sky%E5%85%89%C2%B7%E9%81%87"><i
                        class="ri-rocket-line"></i><span>sky光·遇</span></a> <a
                        href="/game/jiangniang--%E6%88%98%E8%88%B0%E5%B0%91%E5%A5%B3"><i
                        class="ri-rocket-line"></i><span>战舰少女</span></a> <a
                        href="/game/pns--%E6%88%98%E5%8F%8C%E5%B8%95%E5%BC%A5%E4%BB%80"><i
                        class="ri-rocket-line"></i><span>战双帕弥什</span></a> <a
                        href="/game/land--%E5%85%89%E6%98%8E%E5%A4%A7%E9%99%86"><i
                        class="ri-rocket-line"></i><span>光明大陆</span></a> <a
                        href="/game/bs--%E8%8D%92%E9%87%8E%E4%B9%B1%E6%96%97"><i
                        class="ri-rocket-line"></i><span>荒野乱斗</span></a> <a
                        href="/game/cr--%E9%83%A8%E8%90%BD%E5%86%B2%E7%AA%81%EF%BC%9A%E7%9A%87%E5%AE%A4%E6%88%98%E4%BA%89"><i
                        class="ri-rocket-line"></i><span>部落冲突：皇室战争</span></a> <a
                        href="/game/sssj--%E5%8F%8C%E7%94%9F%E8%A7%86%E7%95%8C"><i
                        class="ri-rocket-line"></i><span>双生视界</span></a> <a
                        href="/game/lz--%E9%87%8F%E5%AD%90%E7%89%B9%E6%94%BB"><i
                        class="ri-rocket-line"></i><span>量子特攻</span></a> <a
                        href="/game/wx--%E4%BA%94%E8%A1%8C%E5%B8%88"><i
                        class="ri-rocket-line"></i><span>五行师</span></a> <a
                        href="/game/stzb--%E7%8E%87%E5%9C%9F%E4%B9%8B%E6%BB%A8"><i
                        class="ri-rocket-line"></i><span>率土之滨</span></a> <a
                        href="/game/my--%E6%A2%A6%E5%B9%BB%E8%A5%BF%E6%B8%B8"><i
                        class="ri-rocket-line"></i><span>梦幻西游</span></a> <a
                        href="/game/yrzx--%E4%B8%80%E4%BA%BA%E4%B9%8B%E4%B8%8B"><i
                        class="ri-rocket-line"></i><span>一人之下</span></a> <a
                        href="/game/hyrz--%E7%81%AB%E5%BD%B1%E5%BF%8D%E8%80%85%EF%BC%9A%E7%96%BE%E9%A3%8E%E4%BC%A0"><i
                        class="ri-rocket-line"></i><span>火影忍者：疾风传</span></a> <a
                        href="/game/zx--%E6%96%B0%E8%AF%9B%E4%BB%99"><i
                        class="ri-rocket-line"></i><span>新诛仙</span></a> <a
                        href="/game/majiang--%E6%AC%A2%E4%B9%90%E9%BA%BB%E5%B0%86%E5%85%A8%E9%9B%86"><i
                        class="ri-rocket-line"></i><span>欢乐麻将全集</span></a> <a
                        href="/game/frxy--%E9%9D%9E%E4%BA%BA%E5%AD%A6%E5%9B%AD"><i
                        class="ri-rocket-line"></i><span>非人学园</span></a> <a
                        href="/game/pes--%E5%AE%9E%E5%86%B5%E8%B6%B3%E7%90%83"><i
                        class="ri-rocket-line"></i><span>实况足球</span></a> <a
                        href="/game/gf--%E5%B0%91%E5%A5%B3%E5%89%8D%E7%BA%BF"><i
                        class="ri-rocket-line"></i><span>少女前线</span></a> <a
                        href="/game/lm--%E7%8E%8B%E5%9B%BD%E7%BA%AA%E5%85%83"><i
                        class="ri-rocket-line"></i><span>王国纪元</span></a> <a
                        href="/game/tl--%E5%A4%A9%E9%BE%99%E5%85%AB%E9%83%A8"><i
                        class="ri-rocket-line"></i><span>天龙八部</span></a> <a
                        href="/game/ddt--%E5%BC%B9%E5%BC%B9%E5%A0%82"><i
                        class="ri-rocket-line"></i><span>弹弹堂</span></a> <a
                        href="/game/kof98ol--%E6%8B%B3%E7%9A%8798OL"><i
                        class="ri-rocket-line"></i><span>拳皇98OL</span></a> <a
                        href="/game/tx--%E5%A4%A9%E4%B8%8B-%E5%BC%82%E5%85%BD%E5%B1%B1%E6%B5%B7"><i
                        class="ri-rocket-line"></i><span>天下-异兽山海</span></a> <a
                        href="/game/tom--%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0"><i
                        class="ri-rocket-line"></i><span>猫和老鼠</span></a> <a
                        href="/game/lr--%E7%8C%8E%E4%BA%BA"><i class="ri-rocket-line"></i><span>猎人</span></a> <a
                        href="/game/wpzs--%E7%8E%8B%E7%89%8C%E6%88%98%E5%A3%AB"><i
                        class="ri-rocket-line"></i><span>王牌战士</span></a> <a
                        href="/game/lzhx--%E9%BE%99%E6%97%8F%E5%B9%BB%E6%83%B3"><i
                        class="ri-rocket-line"></i><span>龙族幻想</span></a> <a
                        href="/game/wdqy--%E6%88%91%E7%9A%84%E8%B5%B7%E6%BA%90"><i
                        class="ri-rocket-line"></i><span>我的起源</span></a> <a
                        href="/game/sanguosha--%E4%B8%89%E5%9B%BD%E6%9D%80"><i
                        class="ri-rocket-line"></i><span>三国杀</span></a>
                    <a href="/game/x5--QQ%E7%82%AB%E8%88%9E"><i class="ri-rocket-line"></i><span>QQ炫舞</span></a>
                    <a href="/game/kunlun--%E4%BB%99%E5%89%91%E5%A5%87%E4%BE%A0%E4%BC%A0%E7%A7%BB%E5%8A%A8%E7%89%88"><i
                        class="ri-rocket-line"></i><span>仙剑奇侠传移动版</span></a> <a
                        href="/game/mir--%E7%83%AD%E8%A1%80%E4%BC%A0%E5%A5%87"><i
                        class="ri-rocket-line"></i><span>热血传奇</span></a> <a
                        href="/game/gjjh--%E5%8F%A4%E4%BB%8A%E6%B1%9F%E6%B9%96"><i
                        class="ri-rocket-line"></i><span>古今江湖</span></a> <a
                        href="/game/yyzy--%E6%9C%88%E5%9C%86%E4%B9%8B%E5%A4%9C"><i
                        class="ri-rocket-line"></i><span>月圆之夜</span></a> <a
                        href="/game/jnbjt--%E6%B1%9F%E5%8D%97%E7%99%BE%E6%99%AF%E5%9B%BE"><i
                        class="ri-rocket-line"></i><span>江南百景图</span></a> <a
                        href="/game/zhyhc--%E5%8F%AC%E5%94%A4%E4%B8%8E%E5%90%88%E6%88%90"><i
                        class="ri-rocket-line"></i><span>召唤与合成</span></a> <a
                        href="/game/myzr--%E9%AD%94%E6%B8%8A%E4%B9%8B%E5%88%83"><i
                        class="ri-rocket-line"></i><span>魔渊之刃</span></a> <a
                        href="/game/sd--%E7%81%8C%E7%AF%AE%E9%AB%98%E6%89%8B"><i
                        class="ri-rocket-line"></i><span>灌篮高手</span></a> <a
                        href="/game/blhx--%E7%A2%A7%E8%93%9D%E8%88%AA%E7%BA%BF"><i
                        class="ri-rocket-line"></i><span>碧蓝航线</span></a> <a
                        href="/game/dn2--%E9%BE%99%E4%B9%8B%E8%B0%B72"><i
                        class="ri-rocket-line"></i><span>龙之谷2</span></a> <a
                        href="/game/qjnn--%E5%A5%87%E8%BF%B9%E6%9A%96%E6%9A%96"><i
                        class="ri-rocket-line"></i><span>奇迹暖暖</span></a> <a
                        href="/game/bangdream--BanG%20Dream%EF%BC%81%E5%B0%91%E5%A5%B3%E4%B9%90%E5%9B%A2%E6%B4%BE%E5%AF%B9%EF%BC%81"><i
                        class="ri-rocket-line"></i><span>BanG Dream！少女乐团派对！</span></a> <a
                        href="/game/sgs--%E4%B8%89%E5%9B%BD%E6%9D%80%20online"><i
                        class="ri-rocket-line"></i><span>三国杀 online</span></a> <a
                        href="/game/jianghu--%E4%B8%80%E6%A2%A6%E6%B1%9F%E6%B9%96"><i class="ri-rocket-line"></i><span>一梦江湖</span></a>
                    <a href="/game/xxa--%E6%96%B0%E7%AC%91%E5%82%B2%E6%B1%9F%E6%B9%96"><i
                        class="ri-rocket-line"></i><span>新笑傲江湖</span></a> <a
                        href="/game/ffm--FIFA%20%E8%B6%B3%E7%90%83%E4%B8%96%E7%95%8C"><i
                        class="ri-rocket-line"></i><span>FIFA 足球世界</span></a> <a
                        href="/game/zqwn--%E6%9C%80%E5%BC%BA%E8%9C%97%E7%89%9B"><i
                        class="ri-rocket-line"></i><span>最强蜗牛</span></a> <a
                        href="/game/ysczg--%E4%BA%91%E4%B8%8A%E5%9F%8E%E4%B9%8B%E6%AD%8C"><i
                        class="ri-rocket-line"></i><span>云上城之歌</span></a> <a
                        href="/game/lc--%E5%A4%B1%E8%90%BD%E5%9F%8E%E5%A0%A1"><i
                        class="ri-rocket-line"></i><span>失落城堡</span></a> <a
                        href="/game/htzx--%E9%B8%BF%E5%9B%BE%E4%B9%8B%E4%B8%8B"><i
                        class="ri-rocket-line"></i><span>鸿图之下</span></a> <a
                        href="/game/hxjh--%E5%B9%BB%E6%83%B3%E6%B1%9F%E6%B9%96"><i
                        class="ri-rocket-line"></i><span>幻想江湖</span></a> <a
                        href="/game/cmsgz--%E7%AD%96%E9%A9%AC%E4%B8%89%E5%9B%BD%E5%BF%97"><i
                        class="ri-rocket-line"></i><span>策马三国志</span></a> <a href="/game/mj--%E6%9C%AB%E5%89%91"><i
                        class="ri-rocket-line"></i><span>末剑</span></a> <a
                        href="/game/xjcs--%E4%BB%99%E5%A2%83%E4%BC%A0%E8%AF%B4RO%EF%BC%9A%E5%AE%88%E6%8A%A4%E6%B0%B8%E6%81%92%E7%9A%84%E7%88%B1"><i
                        class="ri-rocket-line"></i><span>仙境传说RO：守护永恒的爱</span></a> <a
                        href="/game/szqy--%E9%A3%9F%E4%B9%8B%E5%A5%91%E7%BA%A6"><i
                        class="ri-rocket-line"></i><span>食之契约</span></a> <a
                        href="/game/lygyd--%E5%8F%A6%E4%B8%80%E4%B8%AA%E4%BC%8A%E7%94%B8%20%3A%20%E8%B6%85%E8%B6%8A%E6%97%B6%E7%A9%BA%E7%9A%84%E7%8C%AB"><i
                        class="ri-rocket-line"></i><span>另一个伊甸 : 超越时空的猫</span></a> <a
                        href="/game/lol--%E8%8B%B1%E9%9B%84%E8%81%94%E7%9B%9F"><i
                        class="ri-rocket-line"></i><span>英雄联盟</span></a> <a
                        href="/game/ow--%E5%AE%88%E6%9C%9B%E5%85%88%E9%94%8B"><i
                        class="ri-rocket-line"></i><span>守望先锋</span></a> <a
                        href="/game/ff14--%E6%9C%80%E7%BB%88%E5%B9%BB%E6%83%B314"><i
                        class="ri-rocket-line"></i><span>最终幻想14</span></a> <a
                        href="/game/dnf--%E5%9C%B0%E4%B8%8B%E5%9F%8E%E4%B8%8E%E5%8B%87%E5%A3%AB"><i
                        class="ri-rocket-line"></i><span>地下城与勇士</span></a> <a
                        href="/game/jx3--%E5%89%91%E7%BD%913"><i class="ri-rocket-line"></i><span>剑网3</span></a>
                    <a href="/game/dota2--%E5%88%80%E5%A1%942"><i class="ri-rocket-line"></i><span>刀塔2</span></a>
                    <a href="/game/gjol--%E5%8F%A4%E5%89%91%E5%A5%87%E8%B0%ADOL"><i
                        class="ri-rocket-line"></i><span>古剑奇谭OL</span></a> <a
                        href="/game/csgo--%E5%8F%8D%E6%81%90%E7%B2%BE%E8%8B%B1%EF%BC%9A%E5%85%A8%E7%90%83%E6%94%BB%E5%8A%BF"><i
                        class="ri-rocket-line"></i><span>反恐精英：全球攻势</span></a> <a
                        href="/game/cf--%E7%A9%BF%E8%B6%8A%E7%81%AB%E7%BA%BF"><i
                        class="ri-rocket-line"></i><span>穿越火线</span></a> <a
                        href="/game/wow--%E9%AD%94%E5%85%BD%E4%B8%96%E7%95%8C"><i
                        class="ri-rocket-line"></i><span>魔兽世界</span></a> <a
                        href="/game/wowclassic--%E9%AD%94%E5%85%BD%E4%B8%96%E7%95%8C%E6%80%80%E6%97%A7%E6%9C%8D"><i
                        class="ri-rocket-line"></i><span>魔兽世界怀旧服</span></a> <a
                        href="/game/wot--%E5%9D%A6%E5%85%8B%E4%B8%96%E7%95%8C"><i
                        class="ri-rocket-line"></i><span>坦克世界</span></a> <a
                        href="/game/codol--%E4%BD%BF%E5%91%BD%E5%8F%AC%E5%94%A4OL"><i class="ri-rocket-line"></i><span>使命召唤OL</span></a>
                    <a href="/game/gw2--%E6%BF%80%E6%88%982"><i class="ri-rocket-line"></i><span>激战2</span></a>
                    <a href="/game/hs--%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4"><i
                        class="ri-rocket-line"></i><span>炉石传说</span></a>
                    <a href="/game/eve--%E6%98%9F%E6%88%98%E5%89%8D%E5%A4%9C"><i
                        class="ri-rocket-line"></i><span>星战前夜</span></a> <a
                        href="/game/300--300%E8%8B%B1%E9%9B%84"><i class="ri-rocket-line"></i><span>300英雄</span></a>
                    <a href="/game/dz--%E9%AD%94%E5%85%BD%E4%BA%89%E9%9C%B8%E7%BD%91%E6%98%93%E5%B9%B3%E5%8F%B0"><i
                        class="ri-rocket-line"></i><span>魔兽争霸网易平台</span></a> <a
                        href="/game/wows--%E6%88%98%E8%88%B0%E4%B8%96%E7%95%8C"><i
                        class="ri-rocket-line"></i><span>战舰世界</span></a> <a
                        href="/game/nsh--%E9%80%86%E6%B0%B4%E5%AF%92OL"><i
                        class="ri-rocket-line"></i><span>逆水寒OL</span></a> <a
                        href="/game/poe--%E6%B5%81%E6%94%BE%E4%B9%8B%E8%B7%AF"><i
                        class="ri-rocket-line"></i><span>流放之路</span></a> <a href="/game/bns--%E5%89%91%E7%81%B5"><i
                        class="ri-rocket-line"></i><span>剑灵</span></a> <a
                        href="/game/rl--%E7%81%AB%E7%AE%AD%E8%81%94%E7%9B%9F"><i
                        class="ri-rocket-line"></i><span>火箭联盟</span></a> <a
                        href="/game/nba2k--%E7%AF%AE%E7%90%83%E5%9C%A8%E7%BA%BF"><i
                        class="ri-rocket-line"></i><span>篮球在线</span></a> <a
                        href="/game/tiantang--%E5%A4%A9%E5%A0%82"><i
                        class="ri-rocket-line"></i><span>天堂</span></a> <a
                        href="/game/tiantan2--%E5%A4%A9%E5%A0%822"><i class="ri-rocket-line"></i><span>天堂2</span></a>
                    <a href="/game/nz--%E9%80%86%E6%88%98"><i class="ri-rocket-line"></i><span>逆战</span></a> <a
                        href="/game/mxd2--%E5%86%92%E9%99%A9%E5%B2%9B2"><i
                        class="ri-rocket-line"></i><span>冒险岛2</span></a> <a
                        href="/game/tgc--%E6%96%B0%E5%AF%BB%E4%BB%99"><i
                        class="ri-rocket-line"></i><span>新寻仙</span></a> <a
                        href="/game/qqgame--QQ%20%E6%B8%B8%E6%88%8F%E5%A4%A7%E5%8E%85"><i
                        class="ri-rocket-line"></i><span>QQ 游戏大厅</span></a> <a
                        href="/game/fsjoy--%E8%A1%97%E5%A4%B4%E7%AF%AE%E7%90%83"><i
                        class="ri-rocket-line"></i><span>街头篮球</span></a> <a
                        href="/game/mu--%E5%A5%87%E8%BF%B9MU"><i class="ri-rocket-line"></i><span>奇迹MU</span></a>
                    <a href="/game/chd--%E5%BD%A9%E8%99%B9%E5%B2%9B"><i
                        class="ri-rocket-line"></i><span>彩虹岛</span></a> <a
                        href="/game/age--%E4%B8%8A%E5%8F%A4%E4%B8%96%E7%BA%AA"><i
                        class="ri-rocket-line"></i><span>上古世纪</span></a> <a
                        href="/game/x5--QQ%E7%82%AB%E8%88%9E"><i class="ri-rocket-line"></i><span>QQ炫舞</span></a>
                    <a href="/game/aw--%E8%A3%85%E7%94%B2%E6%88%98%E4%BA%89"><i
                        class="ri-rocket-line"></i><span>装甲战争</span></a>
                    <a href="/game/c9--%E7%AC%AC%E4%B9%9D%E5%A4%A7%E9%99%86"><i
                        class="ri-rocket-line"></i><span>第九大陆</span></a>
                    <a href="/game/dn--%E9%BE%99%E4%B9%8B%E8%B0%B7"><i
                        class="ri-rocket-line"></i><span>龙之谷</span></a> <a
                        href="/game/xy2--%E6%96%B0%E5%A4%A7%E8%AF%9D%E8%A5%BF%E6%B8%B82"><i
                        class="ri-rocket-line"></i><span>新大话西游2</span></a> <a
                        href="/game/sgs--%E4%B8%89%E5%9B%BD%E6%9D%80"><i
                        class="ri-rocket-line"></i><span>三国杀</span></a> <a
                        href="/game/hy--%E8%8D%92%E9%87%8E%E8%A1%8C%E5%8A%A8"><i
                        class="ri-rocket-line"></i><span>荒野行动</span></a> <a
                        href="/game/sgcq--%E7%A5%9E%E9%AC%BC%E4%BC%A0%E5%A5%87"><i
                        class="ri-rocket-line"></i><span>神鬼传奇</span></a> <a
                        href="/game/wuxia--%E5%A4%A9%E6%B6%AF%E6%98%8E%E6%9C%88%E5%88%80"><i
                        class="ri-rocket-line"></i><span>天涯明月刀</span></a> <a
                        href="/game/5s--%E7%82%AB%E8%88%9E%E6%97%B6%E4%BB%A3"><i
                        class="ri-rocket-line"></i><span>炫舞时代</span></a> <a
                        href="/game/d3--%E6%9A%97%E9%BB%91%E7%A0%B4%E5%9D%8F%E7%A5%9E3"><i
                        class="ri-rocket-line"></i><span>暗黑破坏神3</span></a> <a
                        href="/game/zt2--%E5%BE%81%E9%80%942"><i class="ri-rocket-line"></i><span>征途2</span></a>
                    <a href="/game/zjfb--%E8%A3%85%E7%94%B2%E9%A3%8E%E6%9A%B4"><i
                        class="ri-rocket-line"></i><span>装甲风暴</span></a> <a
                        href="/game/aion--%E6%B0%B8%E6%81%92%E4%B9%8B%E5%A1%94"><i
                        class="ri-rocket-line"></i><span>永恒之塔</span></a></div>
            </div>
        </section>

        <section class="ml-game-banner ml-wrapper">
            <div class="container"><img src="../assets/banner_icon.ba0d1.svg" alt="">
                <h3>{{$t('game_game_banner_title')}}</h3><a href="/download" class="ml-game-btn">{{$t('game_game_banner_desc')}}</a></div>
        </section>
    </main>
</template>

<script>
import GameHero from "@/components/GameHero";
import UserComment from "@/components/UserComment";

export default {
    name: "Game",
    components: {UserComment, GameHero},
    data() {
        return {
            feature: [
                {
                    title: this.$t('game_feature_li_1_title'),
                    desc: this.$t('game_feature_li_1_desc'),
                    path: require('@/assets/feature_game_1.3be96.svg')
                },
                {
                    title: this.$t('game_feature_li_2_title'),
                    desc: this.$t('game_feature_li_2_desc'),
                    path: require('@/assets/feature_game_2.3b5ed.svg')
                },
                {
                    title: this.$t('game_feature_li_3_title'),
                    desc: this.$t('game_feature_li_3_desc'),
                    path: require('@/assets/feature_game_3.66777.svg')
                },
                {
                    title: this.$t('game_feature_li_4_title'),
                    desc: this.$t('game_feature_li_4_desc'),
                    path: require('@/assets/feature_game_4.9063d.svg')
                }
            ],
            gameImg: [
                {
                    path: require('@/assets/img-0.40fbc.jpg')
                },
                {
                    path: require('@/assets/img-1.25729.jpg')
                },
                {
                    path: require('@/assets/img-2.7bf24.jpg')
                },
                {
                    path: require('@/assets/img-3.d1a85.jpg')
                },
                {
                    path: require('@/assets/1592186394791.png')
                },
                {
                    path: require('@/assets/img-5.669e7.jpg')
                },
                {
                    path: require('@/assets/img-6.05e35.jpg')
                },
                {
                    path: require('@/assets/img-7.10f68.jpg')
                }
            ]
        }
    }
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .ml-game-feature {
        .title {
            h2:before {
                left: -60px!important;
                top: 18px!important;
                width: 35px!important;
                height: 10px!important;
            }
            h2:after {
                right: -60px!important;
                top: 18px!important;
                width: 35px!important;
                height: 10px!important;
            }
        }
        .item-feature {
            .content {
                margin-bottom: 80px!important;
            }
        }
    }
    .ml-game-img {
        .title {
            h2 {
                font-size: 28px!important;
            }
            h2:before {
                left: -60px!important;
                top: 18px!important;
                width: 35px!important;
                height: 10px!important;
            }
            h2:after {
                right: -60px!important;
                top: 18px!important;
                width: 35px!important;
                height: 10px!important;
            }
        }
    }
    .scene {

        .title {
            h2 {
                font-size: 32px!important;
            }
        }
    }
    .price {
        .title {
            h2 {
                font-size: 28px!important;
                text-align: center;
                line-height: 1.5;
            }
            h2:before {
                display: none!important;
            }
            h2:after {
               display: none!important;
            }
        }
        .plans {
            .col-6 {
                margin-bottom: 24px
            }
        }
    }
    .scene {
        .title {
            h2 {
                font-size: 28px!important;
                text-align: center;
                line-height: 1.5;
            }
            h2:before {
                display: none!important;
            }
            h2:after {
                display: none!important;
            }
        }
        .plans {
            .col-6 {
                margin-bottom: 24px
            }
        }
    }
    .ml-seo-more {
        .title {
            h2 {
                font-size: 28px!important;
            }
            h2:before {
                left: -60px!important;
                top: 18px!important;
                width: 35px!important;
                height: 10px!important;
            }
            h2:after {
                right: -60px!important;
                top: 18px!important;
                width: 35px!important;
                height: 10px!important;
            }
        }
    }
    .ml-game-banner {
        padding-bottom: 0!important;
        .container {
            flex-direction: column;
            h3 {
                font-size: 32px!important;
                text-align: center;
            }
            a {
                margin: 24px 0 80px!important;
            }
        }
    }
}
main {
    background: #15152D;

    .ml-game-feature {
        background: url(../assets/bg_1.38eda.png) no-repeat;
        background-size: cover;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 100px;
            position: relative;

            h2 {
                color: #fff;
                display: inline-block;
                position: relative;
                padding: 0;
            }

            h2:before {
                width: 73px;
                height: 19px;
                background: url(../assets/title_left.e5ca6.svg) no-repeat;
                background-size: cover;
                left: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }

            h2:after {
                width: 73px;
                height: 19px;
                background: url(../assets/title_right.880f5.svg) no-repeat;
                background-size: cover;
                right: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }
        }

        .row {
            margin-top: 120px;

            .content {
                background: #181831;
                border: 2px solid #2D2D4F;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 24px;
                min-height: 210px;
                transition: all .2s ease;

                img {
                    margin-top: -70px;
                }

                h4 {
                    margin-top: 24px;
                    font-size: 20px;
                    color: #fff;
                    position: relative;
                }

                p {
                    text-align: center;
                    color: rgba(255, 255, 255, .5);
                    margin-top: 16px;
                    font-size: 14px;
                    line-height: 1.6;
                }
            }
        }
    }

    .ml-game-img {
        background: url(../assets/bg_2.07fba.png) no-repeat;
        background-size: cover;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 100px;
            position: relative;

            h2 {
                color: #fff;
                display: inline-block;
                position: relative;
                padding: 0;
            }

            h2:before {
                width: 73px;
                height: 19px;
                background: url(../assets/title_left.e5ca6.svg) no-repeat;
                background-size: cover;
                left: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }

            h2:after {
                width: 73px;
                height: 19px;
                background: url(../assets/title_right.880f5.svg) no-repeat;
                background-size: cover;
                right: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }
        }

        .row {
            margin-top: 90px;

            .content {
                margin-bottom: 24px;

                img {
                    width: 100%;
                    height: auto;
                    transition: all .2s ease;
                    cursor: pointer;
                }

                img:hover {
                    transform: scale(1.05);
                }
            }
        }
    }

    .scene {
        margin-top: 0;
        text-align: center;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding-top: 20px !important;
            flex-direction: column;

            h2 {
                color: #fff;
                display: inline-block;
                position: relative;
                padding: 0;
                text-align: center;
                font-size: 40px;
            }

            h2:before {
                width: 73px;
                height: 19px;
                background: url(../assets/title_left.e5ca6.svg) no-repeat;
                background-size: cover;
                left: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }

            h2:after {
                width: 73px;
                height: 19px;
                background: url(../assets/title_right.880f5.svg) no-repeat;
                background-size: cover;
                right: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }

            .quote {
                color: rgba(255, 255, 255, .6);
                text-align: center;
                margin-top: 16px;
            }
        }

        .content {
            margin-top: 64px;
            background: linear-gradient(
                    180deg, #0C0C2E 0, #3E3000 100%);
            padding: 18px;
            min-height: 326px;
            border-radius: 6px;

            img {
                width: 100%;
            }

            .title {
                margin-top: 20px;
                font-size: 16px;
                color: #fff;
                text-align: left;
                font-weight: 500;
                padding-top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
            }

            .des {
                margin-top: 8px;
                text-align: left;
                font-size: 13px;
                line-height: 1.6;
                color: rgba(255, 255, 255, .8);
            }
        }

        .s2 {
            background: linear-gradient(
                    180deg, #0C0C31 0, #22065E 100%);
        }

        .s3 {
            background: linear-gradient(
                    180deg, #120833 0, #561919 100%);
        }

        .s4 {
            background: linear-gradient(
                    180deg, #110933 0, #002C6D 100%);
        }

        a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 48px;
            cursor: pointer;
            transition: all .2s ease;
            font-weight: 500;
            background: url(../assets/hero_btn.05f25.svg) no-repeat;
            background-size: cover;
            border-radius: 0;
            color: #333;
            height: 48px;
            padding: 0 60px;
            font-size: 16px;
        }
    }

    .price {
        padding: 16px 0;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 100px;
            position: relative;

            h2 {
                color: #fff;
                display: inline-block;
                position: relative;
                padding: 0;
            }

            h2:before {
                width: 73px;
                height: 19px;
                background: url(../assets/title_left.e5ca6.svg) no-repeat;
                background-size: cover;
                left: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }

            h2:after {
                width: 73px;
                height: 19px;
                background: url(../assets/title_right.880f5.svg) no-repeat;
                background-size: cover;
                right: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }
        }

        .plans {
            margin-top: 64px;
            flex-direction: row-reverse;
        }

        .price-card {
            background: #181831;
            border: 2px solid #2D2D4F;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            padding: 30px 0;
            cursor: pointer;
            transition: all .2s ease;
            box-shadow: 0 13px 24px rgb(0 0 0 / 6%);

            .tag {
                position: absolute;
                top: -16px;
                background: #FFCC47;
                font-size: 14px;
                padding: 6px 18px;
                color: #15152D;
                border-radius: 0 10px;
                font-weight: 500;
            }

            .top {
                display: flex;
                align-items: center;

                .days {
                    font-size: 16px;
                    color: rgba(255, 255, 255, .6);
                    border-right: 1px solid rgba(255, 255, 255, .2);
                    padding-right: 6px;
                }

                .discount {
                    font-size: 16px;
                    color: #07BB07;
                    margin-left: 6px;
                }
            }

            .middle {
                margin-top: 16px;
                display: flex;
                align-items: center;
                color: #ffa024;

                .nbfont {
                    font-size: 32px;
                    color: #ffa024;
                    font-family: "DIN Condensed";
                    font-weight: 700;
                    font-style: normal;
                    letter-spacing: .02em;
                }

                span {
                    font-size: 14px;
                    color: rgba(255, 255, 255, .6);
                    margin-left: 6px;
                }
            }

            .bottom {
                font-size: 16px;
                margin-top: 16px;
                color: rgba(255, 255, 255, .8);
            }

            a {
                margin-top: 24px;
                font-size: 14px;
                border: 1px solid #ffa024;
                color: #ffa024;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 32px;
                padding: 0 16px;
                border-radius: 4px;
                transition: all .2s ease;
            }
        }

        .tips {
            border-radius: 6px;
            margin-top: 32px;
            background: rgba(255, 255, 255, .02);
            height: 48px;
            color: #ffa024;
            font-size: 15px;
            font-weight: 500;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 13px 24px rgb(0 0 0 / 2%);

            i {
                font-size: 20px;
                margin-right: 6px;
            }
        }
    }

    .ml-seo-more {
        margin-bottom: 80px;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding-top: 20px !important;
            flex-direction: column;

            h2 {
                color: #fff;
                display: inline-block;
                position: relative;
                padding: 0;
                text-align: center;
                font-size: 40px;
            }

            h2:before {
                width: 73px;
                height: 19px;
                background: url(../assets/title_left.e5ca6.svg) no-repeat;
                background-size: cover;
                left: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }

            h2:after {
                width: 73px;
                height: 19px;
                background: url(../assets/title_right.880f5.svg) no-repeat;
                background-size: cover;
                right: -120px;
                top: 25px;
                display: block;
                position: absolute;
                content: "";
            }

            .quote {
                color: rgba(255, 255, 255, .6);
                text-align: center;
                margin-top: 16px;
                font-size: 12px;
            }
        }

        .content {
            margin-top: 64px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            a {
                width: 20%;
                font-size: 13px;
                margin-bottom: 16px;
                color: rgba(255, 255, 255, .6);
                display: flex;
                align-items: center;
                transition: all .2s ease;

                i {
                    font-size: 16px;
                    color: #FFCC47;
                    margin-right: 6px;
                }
            }

            a:hover {
                color: #FFCC47;
            }
        }
    }

    .ml-game-banner {
        padding-bottom: 100px;

        .container {
            background: url(../assets/banner_bg.3f97f.png) no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 115px;
                height: 240px;
                margin-top: -16px;
            }

            h3 {
                font-size: 40px;
                color: #fff;
                margin: 0 32px;
            }

            a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 16px;
                font-weight: 500;
                width: 227px;
                height: 50px;
                background: url(../assets/hero_btn.05f25.svg) no-repeat;
                background-size: cover;
                cursor: pointer;
                color: #181831;
            }
        }
    }
}
</style>
